<header class="site-header">
    <div class="navbar">
        <div class="navbar-left">
            <div class="burger hidden-lg hidden-xl">
                <div class="burger-bar"></div>
                <div class="burger-bar"></div>
            </div>
            <div class="mobile-menu hidden-lg hidden-xl">
                <div class="container">
                    {{#if @site.navigation}}
                        <nav class="mobile-nav">
                            {{navigation}}
                        </nav>
                    {{/if}}
                </div>
            </div>
            <a class="logo" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img class="logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
                {{else}}
                    <span class="logo-text">{{@site.title}}</span>
                {{/if}}
            </a>
        </div>
        {{#if @site.navigation}}
            <nav class="main-nav hidden-xs hidden-sm hidden-md">
                {{navigation}}
            </nav>
        {{/if}}
        <div class="navbar-right">
            <div class="social">
                {{#if @site.facebook}}
                    <a class="social-item social-item-facebook"
                        href="{{facebook_url @site.facebook}}" target="_blank"
                        rel="noopener noreferrer" aria-label="Facebook">
                        FB
                    </a>
                {{/if}}
                {{#if @site.twitter}}
                    <a class="social-item social-item-twitter"
                        href="{{twitter_url @site.twitter}}" target="_blank"
                        rel="noopener noreferrer" aria-label="Twitter">
                        TW
                    </a>
                {{/if}}
                <a class="social-item social-item-rss"
                    href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/"
                    target="_blank" rel="noopener noreferrer" aria-label="RSS">
                    RSS
                </a>
            </div>
        </div>
    </div>
</header>